<template>
	<view class="bg">
		<head-navigation title="我的订单" background-color="#fff" isBack="0" />
		<view class='my_order'>
			<view class='my_order_title' @click="jumpOrder">
				<text>神椰订单</text>
				<image src="../../static/right_img.png"></image>
			</view>
			<view class="tab_content">
				<view class='tab' v-for="(item,index) in orderList" :key="index" @click="orderClick(item)">
					<image :src="item.img"></image>
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class='my_order '>
			<view class='my_order_title shfw' @click="jumpService">
				<text>生活服务订单</text>
				<image src="../../static/right_img.png"></image>
			</view>
			<view class="tab_content">
				<view class='tab' v-for="(item,index) in serviceList" :key="index" @click="orderClick(item)">
					<image :src="item.img" mode="aspectFill"></image>
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class='my_order '>
			<view class='my_order_title gwyl' @click="jumpService">
				<text>购物娱乐订单</text>
				<image src="../../static/right_img.png"></image>
			</view>
			<view class="tab_content">
				<view class='tab' v-for="(item,index) in buyList" :key="index" @click="orderClick(item)">
					<image :src="item.img"></image>
					<view>{{item.title}}</view>
				</view>
			</view>
		</view>
		<view style="height: 40rpx;"></view>
		<uni-popup ref="popupLogin" type="dialog" mask-background-color="rgba(0,0,0,0.8)">
			<uni-popup-dialog mode="base" :confirmText="'去登录'" :title="'提示'" :content="'该功能需要登录进行查看'"
				:before-close="true" @close="loginClose" @confirm="loginConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				orderList: [{
					title: '权益卡',
					img: '../../static/order/ic_order_qyk.png',
					url: '/pages/subPackages/pagesC/order/order?headerIndex=0&screenIndex=1'
				}, {
					title: '赚卡',
					img: '../../static/order/ic_order_zk.png',
					url: '/pages/subPackages/pagesC/order/order?headerIndex=0&screenIndex=2'
				}, {
					title: '神椰盲盒',
					img: '../../static/order/ic_order_mh.png',
					url: '/pages/subPackages/pagesC/order/order?headerIndex=0&screenIndex=3'
				}, {
					title: '神椰集市',
					img: '../../static/order/ic_order_syjs.png',
					url: '/pages/subPackages/pagesC/order/order?headerIndex=0&screenIndex=4'
				}, {
					title: '数字宝箱',
					img: '../../static/order/ic_order_sybx.png',
					url: '/pages/subPackages/pagesC/order/order?headerIndex=0&screenIndex=5'
				}, {
					title: '卡转赠',
					img: '../../static/order/ic_order_kzz.png',
					url: '/pages/subPackages/pagesC/order/order?headerIndex=0&screenIndex=6'
				}, {
					title: '积分转赠',
					img: '../../static/order/ic_order_jfzz.png',
					url: '/pages/subPackages/pagesC/order/order?headerIndex=0&screenIndex=7'
				}, {
					title: '打卡活动',
					img: '../../static/order/ic_order_dkhd.png',
					url: '/pages/subPackages/pagesC/order/order?headerIndex=0&screenIndex=8'
				}, ],
				serviceList:[
					{
						title: '美团',
						img: '../../static/order/order_meituan.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=美团&id=1'
					},
					{
						title: '饿了么',
						img: '../../static/order/order_elm.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=饿了么&id=2'
					},
					{
						title: '肯德基',
						img: '../../static/order/order_kdj.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=肯德基&id=5'
					},
					{
						title: '麦当劳',
						img: '../../static/order/order_mdl.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=麦当劳&id=7'
					},
					{
						title: '百果园',
						img: '../../static/order/order_baiguoy.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=百果园&id=9'
					},
					{
						title: '奈雪的茶',
						img: '../../static/order/order_nxdc.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=奈雪的茶&id=10'
					},
					{
						title: '瑞幸咖啡',
						img: '../../static/order/order_rxkf.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=瑞幸咖啡&id=11'
					},
					{
						title: '星巴克',
						img: '../../static/order/order_xbk.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=星巴克&id=12'
					},
					{
						title: '喜茶',
						img: '../../static/order/order_xicha.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=喜茶&id=13'
					},
					{
						title: '汉堡王',
						img: '../../static/order/order_hanbaow.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=汉堡王&id=16'
					},
					{
						title: '必胜客',
						img: '../../static/order/order_bishengke.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=必胜客&id=23'
					},
					{
						title: '大牌餐券',
						img: '../../static/order/order_dapaicj.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=大牌餐券&id=25'
					},
					{
						title: '华莱士',
						img: '../../static/order/order_hualaishi.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=华莱士&id=29'
					},
					{
						title: '库迪咖啡',
						img: '../../static/order/order_kudkf.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=库迪咖啡&id=33'
					},
					{
						title: '美团赚',
						img: '../../static/order/order_meituan.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=美团赚&id=36'
					}
				],
				buyList:[
					{
						title: '拼多多',
						img: '../../static/order/order_pdd.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=拼多多&id=3'
					},
					{
						title: '京东',
						img: '../../static/order/order_jd.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=京东&id=4'
					},
					{
						title: '淘宝',
						img: '../../static/order/order_tb.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=淘宝&id=32'
					},
					{
						title: '唯品会',
						img: '../../static/order/order_wph.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=唯品会&id=14'
					},
					{
						title: '抖音联盟',
						img: '../../static/order/order_dylm.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=抖音联盟&id=22'
					},
					{
						title: '电影',
						img: '../../static/order/order_dy.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=电影&id=6'
					},
					{
						title: '话费充值',
						img: '../../static/order/order_hfcz.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=话费充值&id=8'
					},
					{
						title: '高德打车',
						img: '../../static/order/order_gddc.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=高德打车&id=17'
					},
					{
						title: '会员充值',
						img: '../../static/order/order_hycz.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=会员充值&id=19'
					},
					{
						title: '联联周边游',
						img: '../../static/order/order_llzby.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=联联周边游&id=21'
					},
					{
						title: '景点门票',
						img: '../../static/order/order_jdmp.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=景点门票&id=31'
					},
					{
						title: '携程旅行',
						img: '../../static/order/order_xclx.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=携程旅行&id=34'
					},
					{
						title: '分销酒店',
						img: '../../static/order/order_fxjd.png',
						url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=分销酒店&id=35'
					},
				],
				isToken:false, // 判断是否登录
			}
		},
		onShow() {
			this.isToken = (this.$queue.getData('token') != undefined && this.$queue.getData('token') != '') ? true : false
		},
		methods: {
			loginConfirm() {
				// var url = '/pages/index/shenye-paradise/paradise-details/paradise-details?id=' + this.id
				app.jumpPublicLogin()
			},
			loginClose() {
				this.$refs.popupLogin.close()
			},
			jumpOrder() {
				if(!this.isToken){
				   this.$refs.popupLogin.open()
				   return 
				}
				uni.navigateTo({
					url: '/pages/subPackages/pagesC/order/order?headerIndex=0'
				})
			},
			orderClick(item) {
				if(!this.isToken){
				   this.$refs.popupLogin.open()
				   return 
				}
				uni.navigateTo({
					url: item.url
				})
			},
			jumpService(){
				if(!this.isToken){
				   this.$refs.popupLogin.open()
				   return 
				}
				uni.navigateTo({
					url: '/pages/subPackages/pagesC/order/orderJuTuiKe?title=全部'
				})
			}
		}
	}
</script>

<style>
	.bg {
		background-color: #F5F8FE;
		min-height: 100vh;
	}

	.my_order {
		margin: 40rpx 30rpx 0 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.my_order_title {
		width: 306rpx;
		height: 68rpx;
		font-size: 32rpx;
		color: #2C2A2F;
		background: linear-gradient(107.9deg, #FFF0F0 47.65%, rgba(255, 233, 233, 0) 83.35%);
		border-radius: 16rpx 0rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
	}

	.my_order_title image {
		width: 24rpx;
		height: 24rpx;
		margin-left: 4rpx;
	}

	.tab_content {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		padding-bottom: 40rpx;
	}

	.tab {
		width: calc(100% / 5);
		color: #2C2A2F;
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}

	.tab image {
		width: 64rpx;
		height: 64rpx;
		margin-bottom: 14rpx;
	}

	.shfw {
		background: linear-gradient(107.9deg, #F0F1FF 47.65%, rgba(233, 237, 255, 0) 83.35%);
	}

	.gwyl {
		background: linear-gradient(107.9deg, #FFF1E9 47.65%, rgba(255, 233, 220, 0) 83.35%);
	}
</style>